<template>
  <div class="home">
    <el-button type="primary" @click="selectMsg">查询全部</el-button>&nbsp;&nbsp;&nbsp;
    <el-button type="success" @click="goToAddPage" >添加</el-button>
    <div class="table-container">
      <table class="table">
        <thead>
        <tr>
          <th>员工编号</th>
          <th>姓名</th>
          <th>职位</th>
          <th>经理编号</th>
          <th>入职日期</th>
          <th>工资</th>
          <th>佣金</th>
          <th>部门编号</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in msg" :key="item.empno">
          <td>{{ item.empno }}</td>
          <td>{{ item.ename }}</td>
          <td>{{ item.job }}</td>
          <td>{{ item.mgr }}</td>
          <td>{{ formatDate(item.hiredate) }}</td>
          <td>{{ item.sal }}</td>
          <td>{{ item.comm }}</td>
          <td>{{ item.deptno }}</td>
          <td>
            <el-button type="primary" @click="goToEditPage(item)">编辑</el-button>
            <el-button type="danger" @click="deleteMsg(item.empno)">删除</el-button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Home",
  data() {
    return {
      msg: []
    };
  },
  methods: {
    selectMsg() {
      axios
          .get('http://localhost:10000/all/list')
          .then(res => {
            this.msg = res.data.data || []; // 确保 msg 是一个数组
          })
          .catch(err => {
            console.error("获取数据失败:", err);
            this.$message.error('获取数据失败，请重试！'); // 使用 Element UI 的消息提示
          });
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toISOString().split('T')[0]; // 转换为 YYYY-MM-DD 格式
    },
    goToAddPage() {
      this.$router.push('/add'); // 使用 Vue Router 导航到添加页面
    }
  },
  created() {
    this.selectMsg();
  }
};
</script>

<style scoped>
.home {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.table-container {
  overflow-x: auto; /* 允许横向滚动 */
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0; /* 上下留白 */
  font-size: 14px; /* 字体大小 */
}

.table th, .table td {
  border: 1px solid #ddd; /* 行边框 */
  padding: 8px; /* 内边距 */
  text-align: left; /* 左对齐 */
}

.table th {
  background-color: #f2f2f2; /* 表头背景色 */
}

.el-button {
  margin: 10px 0; /* 按钮外边距 */
}
</style>
